<template>
	<view class="content" v-if="isShow" @click.stop="closecanvas()">
		<view class="top-text" :dir="i18nLocale=='ug'?'rtl':''">
			<text>{{$t('Dawenloadimage')}}</text>
				<u-icon name="download" color="#fff" size="28"></u-icon>
		</view>
		<canvas v-if="!haibaoimage" @click.stop="" :style="{ width: canvasW + 'px', height: canvasH + 'px' }"
			canvas-id="Mycanvas"></canvas>
		<canvas canvas-id="qrcode" style="width:200px;height:200px;z-index:-1;opacity: 0;position: absolute;" />
		<image v-if="haibaoimage" :src="haibaoimage" mode=""></image>
		<u-icon name="close-circle" color="#fff" size="28" style="margin-top: 15rpx;"></u-icon>
		
	</view>
</template>

<script>
	import UQrcode from "@/utils/uqrcode.js"
	export default {
		props: {
			headerImg: {
				type: String,
				default: 'https://img0.baidu.com/it/u=530426417,2082848644&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'
			},
			title: {
				type: String,
				default: '草莓千层蛋糕'
			},
			subTitle: {
				type: String,
				default: '鲜嫩多汁的草莓融合香甜奶油'
			},
			price: {
				type: Number,
				default: 36.89
			},
			abImg: {
				type: String,
				default: 'https://img0.baidu.com/it/u=530426417,2082848644&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'
			},
		},
		data() {
			return {
				canvasW: 0,
				canvasH: 0,
				ctx: null,
				isShow: false,
				qrcode: '',
				haibaoimage: ''
			}
		},
		computed: {
			i18nLocale() {
				return this.$i18n.locale;
			}
		},
		methods: {
			closecanvas(){
				this.isShow=false;
			},
			//显示
			showCanvas() {
				this.isShow = true
				//二维码图片
				let that = this;
				UQrcode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: window.location.href,
					size: 200,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#40ac6e',
					fileType: 'jpg',
					errorCorrectLevel: UQrcode.errorCorrectLevel.H,
					logoPath: 'https://img0.baidu.com/it/u=530426417,2082848644&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500', // Logo图片路径  
					logoWidth: 50, // Logo宽度  
					logoHeight: 50, // Logo高度  
					success: res => {
						that.qrcode = res;
						this.__init();

					},
					fail(err) {
						that.qrcode ='https://img0.baidu.com/it/u=530426417,2082848644&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500';
					}
				})

			},
			//初始化画布
			async __init() {
				uni.showLoading({
					title: this.$t('Sub_Loading'),
					mask: true
				})
				this.ctx = uni.createCanvasContext('Mycanvas', this)
				this.canvasW = uni.upx2px(580);
				this.canvasH = uni.upx2px(900);
				//设置画布背景透明
				this.ctx.setFillStyle('rgba(255, 255, 255, 0)')
				//设置画布大小
				this.ctx.fillRect(0, 0, this.canvasW, this.canvasH)
			
				//绘制圆角背景
					let backgroundImage=await this.getImageInfo( this.$store.state.lang=='ug'?require('../static/images/ug_bg.jpg'):require('../static/images/cn_bg.jpg'));
				this.drawRoundImg(this.ctx,backgroundImage.path, 0, 0, this.canvasW, this.canvasH, uni.upx2px(18))
				//绘制画布边框
				// this.ctx.setStrokeStyle('#45BC1B');

				// border: 2rpx solid ;
				//获取标题图片
				let headerImg = await this.getImageInfo(this.headerImg)
				let hW = uni.upx2px(150);
				let hH = uni.upx2px(150);
				let size = Math.min(uni.upx2px(150), uni.upx2px(150)); // 取宽度和高度的最小值作为圆形图片的尺寸
				let borderWidth = 4; // 边框宽度
				let borderColor = '#fff'; // 边框颜色
				//绘制标题图
				// this.drawRoundImg(this.ctx, headerImg.path, ((this.canvasW - hW) / 2), ((this.canvasW - hW) / 2)+ uni.upx2px(-130), hW,
				// 	hH, uni.upx2px(10))
				this.drawCircleImg(this.ctx, headerImg.path, ((this.canvasW - size) / 2), ((this.canvasW - size) / 2)+ uni.upx2px(-120), size,borderWidth, borderColor);
				
				//绘制标题
			this.ctx.setFontSize(18); //设置标题字体大小
			this.ctx.setFillStyle('#40ac6e'); //设置标题文本颜色
			this.ctx.font = '18px UKIJTuzTom';
			this.ctx.textAlign = 'center'; //设置文本居中
			this.ctx.fillText(this.title, this.canvasW / 2, hH + uni.upx2px(155));
				// //绘制副标题
				this.ctx.setFontSize(14);
				this.ctx.setFillStyle('#858585');
				let sWidth = this.ctx.measureText(this.subTitle).width
				if(sWidth > hW){
					this.ctx.fillText(this.subTitle.slice(0,17) + '...',((this.canvasW-hW) / 2),(
					((this.canvasW-hW) / 2) + hH + uni.upx2px(110)))
				}else{
					this.ctx.fillText(this.subTitle,((this.canvasW-hW) / 2),(
					((this.canvasW-hW) / 2) + hH + uni.upx2px(110)))
				}
			
				//绘制虚线
				// this.drawDashLine(this.ctx, uni.upx2px(20), (((this.canvasW - hW) / 2) + hH + uni.upx2px(180)), (this
					// .canvasW - uni.upx2px(20)), (((this.canvasW - hW) / 2) + hH + uni.upx2px(180)), 5)
				//左边实心圆
				// this.drawEmptyRound(this.ctx, 0, (((this.canvasW - hW) / 2) + hH + uni.upx2px(180)), uni.upx2px(20))
				//右边实心圆
				// this.drawEmptyRound(this.ctx, this.canvasW, (((this.canvasW - hW) / 2) + hH + uni.upx2px(180)), uni
					// .upx2px(20))
				//提示文案
				// this.ctx.setFontSize(11);
				// this.ctx.setFillStyle('#858585');
				// this.ctx.fillText(' ئۇزاق بېسىپ ئىككىلىك كودنى سكاننېرلاڭ ', (((this.canvasW - hW) / 2) -10), (((this.canvasW - hW) / 2) + hH + uni.upx2px(230)))
				//底部广告
				// let BottomAdImg = await this.getImageInfo(this.abImg)
				// this.ctx.drawImage(BottomAdImg.path, (((this.canvasW - hW) / 2-10)), (((this.canvasW - hW) / 2) + hH + uni.upx2px(250)), uni.upx2px(350), uni.upx2px(110))
				//小程序码
				let qrcodeImg = await this.getImageInfo(this.qrcode)
				this.ctx.drawImage(qrcodeImg.path, uni.upx2px(330), (((this.canvasW - hW) / 2) + hH + uni.upx2px(0)),
					uni.upx2px(200), uni.upx2px(180));
				//延迟渲染

				setTimeout(() => {
					this.ctx.draw(true, (res) => {
						uni.hideLoading();
						this.saveImage();
					})
					uni.hideLoading();
				}, 500)
				


			},
			//圆角
			drawCircleImg(ctx, imgPath, x, y, size, borderWidth, borderColor) {
			  // 绘制圆形剪辑区域
			  ctx.save();
			  ctx.beginPath();
			  ctx.arc(x + size / 2, y + size / 2, size / 2, 0, 2 * Math.PI);
			  ctx.closePath();
			  ctx.clip();
			  
			  // 绘制边框
			  ctx.beginPath();
			  ctx.strokeStyle = borderColor;
			  ctx.lineWidth = borderWidth;
			  ctx.arc(x + size / 2, y + size / 2, size / 2 - borderWidth / 2, 0, 2 * Math.PI);
			  ctx.stroke();
			  
			  // 绘制图片
			  ctx.drawImage(imgPath, x, y, size, size);
			  
			  ctx.restore();
			},
			//绘制实心圆
			drawEmptyRound(ctx, x, y, radius) {
				ctx.save()
				ctx.beginPath();
				ctx.arc(x, y, radius, 0, 2 * Math.PI, true);
				ctx.setFillStyle('rgba(0, 0, 0, .4)')
				ctx.fill();
				ctx.restore()
				ctx.closePath()
			},
			//绘制虚线
			drawDashLine(ctx, x1, y1, x2, y2, dashLength) {
				ctx.setStrokeStyle("#cccccc") //设置线条的颜色
				ctx.setLineWidth(1) //设置线条宽度
				var dashLen = dashLength,
					xpos = x2 - x1, //得到横向的宽度;
					ypos = y2 - y1, //得到纵向的高度;
					numDashes = Math.floor(Math.sqrt(xpos * xpos + ypos * ypos) / dashLen);
				//利用正切获取斜边的长度除以虚线长度，得到要分为多少段;
				for (var i = 0; i < numDashes; i++) {
					if (i % 2 === 0) {
						ctx.moveTo(x1 + (xpos / numDashes) * i, y1 + (ypos / numDashes) * i);
						//有了横向宽度和多少段，得出每一段是多长，起点 + 每段长度 * i = 要绘制的起点；
					} else {
						ctx.lineTo(x1 + (xpos / numDashes) * i, y1 + (ypos / numDashes) * i);
					}
				}
				ctx.stroke();
			},
			//带圆角图片
			drawRoundImg(ctx, img, x, y, width, height, radius) {
				ctx.beginPath()
				ctx.save()
				// 左上角
				ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 1.5)
				// 右上角
				ctx.arc(x + width - radius, y + radius, radius, Math.PI * 1.5, Math.PI * 2)
				// 右下角
				ctx.arc(x + width - radius, y + height - radius, radius, 0, Math.PI * 0.5)
				// 左下角
				ctx.arc(x + radius, y + height - radius, radius, Math.PI * 0.5, Math.PI)
				ctx.stroke()
				ctx.clip()
				ctx.drawImage(img, x, y, width, height);
				ctx.restore()
				ctx.closePath()
			},
			//圆角矩形
			drawRoundRect(ctx, x, y, width, height, radius, color) {
				ctx.save();
				ctx.beginPath();
				ctx.setFillStyle(color);
				ctx.setStrokeStyle(color)
				ctx.setLineJoin('round'); //交点设置成圆角
				ctx.setLineWidth(radius);
				ctx.strokeRect(x + radius / 2, y + radius / 2, width - radius, height - radius);
				ctx.fillRect(x + radius, y + radius, width - radius * 2, height - radius * 2);
				ctx.stroke();
				ctx.closePath();

			},
			//获取图片
			getImageInfo(imgSrc) {
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: imgSrc,
						success: (image) => {
							resolve(image);
							console.log('获取图片成功', image)
						},
						fail: (err) => {
							reject(err);
							console.log('获取图片失败', err)
						}
					});
				});
			},
			//保存图片到相册
			saveImage() {
				let that = this;
				uni.canvasToTempFilePath({
					canvasId: 'Mycanvas',
					success: function(res) {
						// 在H5平台下，tempFilePath 为 base64
						that.haibaoimage = res.tempFilePath;
						console.log(that.haibaoimage, '++++++++')

					},
					fail: function(err) {
						console.log(err.errMsg)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, .4);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 9999;
		image {
			width: 500rpx;
			height: 800rpx;
		}
		.top-text{
			color:#fff;
			// margin-bottom: 20rpx;
			font-weight: bold;
			display: flex;
			align-items: center;
			font-size:$uni-font-size-base ;
			padding: 10rpx 0rpx;
			text{
				padding: 0rpx 20rpx;
			}
		}
		.save-btn {
			margin-top: 35rpx;
			color: #FFFFFF;
			background: linear-gradient(to right, #FE726B, #FE956B);
			padding: 15rpx 40rpx;
			border-radius: 50rpx;
		}
	}
</style>